<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>  
<%@ taglib prefix="s" uri="/struts-tags"%>
<s:include value="/comm/header.jsp" />
<div class="wrap1">
    	<div class="blank1"></div>
        <div class="outbox">
<!--1 start-->
			<div>
        		<div class="wrap_left">
            
                	<span class="tab7_tt">我的代购车</span>
              
            	</div>
            	<div class="wrap_right">
            		<div>
						<div class="pbox6">
            				<ul>
                			<li class="bg1">&nbsp;</li>
                			<li class="s1"><span class="tt">1.&nbsp;&nbsp;查看代购车</span></li>
                    		<li class="bg2">&nbsp;<li>
                   			<li class="s2"><span class="tt">2.&nbsp;&nbsp;确认订单信息</span></li>
                    		<li class="bg3">&nbsp;<li>
                    		<li class="s2"><span class="tt">3.&nbsp;&nbsp;托管代购款到代购岛平台</span></li>
                    		<li class="bg3">&nbsp;<li>
                    		<li class="s2"><span class="tt">4.&nbsp;&nbsp;确认收货并评价</span></li>
                    		<li class="bg4">&nbsp;</li>
                			</ul>
                        </div>
            		</div>
                    
                </div>
                <div class="clear"></div>
            </div>
            
            
<!--1 end -->

 		<div class="pbox7"><div class="tips4">查看代购车</div></div>   
<!--订单确认列表开始-->
        <div class="pbox12" id="carts">
        	<s:if test="cart.count == 0">
        		暂无商品信息
        	</s:if>
        	<s:else>
        		<ul>
                	<li class="t1 tt">&nbsp;</li>
                    <li class="t2 tt"><span>商品</span></li>
                    <li class="t3 tt"><span>价格</span></li>
                    <li class="t4 tt"><span>服务费</span></li>
                    <li class="t5 tt"><span>数量</span></li>
                    <li class="t6 tt"><span>小计</span></li>
					<div class="clear"></div>
                </ul>
				<s:iterator value="brokers" id="broker" status="st">
					<div class="t8" id="broker<s:property value='userid' />">
						<s:if test="#st.index == 0">
							<input id="brokerChk<s:property value='userid' />" name="brokerChk" type="radio" checked value="<s:property value='userid' />"/>
						</s:if>
						<s:else>
							<input id="brokerChk<s:property value='userid' />" name="brokerChk" type="radio" value="<s:property value='userid' />"/>
						</s:else>
						&nbsp;&nbsp;<strong>经纪人：</strong><a href="brokerDetail.htm?id=<s:property value='userid' />"><s:property value='nickName' /></a>
					</div>
					<s:iterator value="cart.items.get(#broker.userid)">
						 <ul class="ttbox" id="item<s:property value='userid'/><s:property value='key' />" name="item<s:property value='userid'/>">
							<li class="t1">
								<div class="pbox1_list_pic">
									<div>
										<p>
											<img src="<s:property value='value.absoluteImage' />"/>
										</p>
									</div>
								</div>
							</li>
							 <li class="t2 t2_a">
							 	<span>
							 		<s:if test="#st.index == 0">
							 			<input name="itemChk" broker="<s:property value='userid' />"  productId="<s:property value='key' />" type="checkbox" checked />&nbsp;&nbsp;<a href="canBuyDetail.htm?id=<s:property value='value.producId' />"><s:property value='value.productName '/></a>
							 		</s:if> 
							 		<s:else>
							 			<input name="itemChk" broker="<s:property value='userid' />"  productId="<s:property value='key' />" type="checkbox" />&nbsp;&nbsp;<a href="canBuyDetail.htm?id=<s:property value='value.producId' />"><s:property value='value.productName '/></a>
							 		</s:else>
							 	</span>
							 </li>
							 <li class="t3"><span class="span18" id="price<s:property value='userid' /><s:property value='key' />">￥<s:property value='value.price' /></span></li>
							 <li class="t4"><span class="span19" id="serviceFee<s:property value='userid' /><s:property value='key' />">￥<s:property value='value.serviceFee' /></span></li>
							 <li class="t5"><span><input broker="<s:property value='userid' />" productId="<s:property value='key' />" type="text" name="number" class="input1" value="<s:property value='value.number' />"  size="1" /></span></li>
							 <li class="t6"><span class="span18" id="subtotal<s:property value='userid' /><s:property value='key' />">￥<s:property value="value.subtotal" /></span></li>
							 <li class="t7">
							 	<span><a href="javascript:delItem(<s:property value='userid'/>, <s:property value='key' />)">删除</a></span>
							 </li>
							  <div class="clear"></div>
					 	</ul>
					</s:iterator>
				</s:iterator>
        	</s:else>
         </div>
         
 	<!--订单确认列表结束-->  
 	<s:if test="cart.count > 0">
 		<div class="blank1"></div>
		<div class="pbox12" id="clear">
            	<div class="wrap_left cbox1">
            			&nbsp;&nbsp;&nbsp;<a href='javascript:clear();'>清空代购车</a>
            		
            	</div>
                <div class="wrap_right">
                	<strong>商品总价（不含运费）：</strong><span class="span2" id="total">￥<s:property value='cart.total' /></span>
                	&nbsp;&nbsp;&nbsp;
                	<span  class="but_sub1">
                			<a href="javascript:settlement()" id="settlement">现在结算</a>	
                	</span>
                </div>
                <div class="clear"></div>
        </div>
     </s:if>
	
        
        </div>
</div>

<s:include value="/comm/bottom.jsp"/>

<script type="text/javascript">
	var lastCheckedBrokerId = 0;
	
	$(document).ready(function(){
		calcTotal();
		
		if ($("[name=brokerChk]").length > 0) {
			lastCheckedBrokerId = $("[name=brokerChk]").val();	
		}
		$("[name=brokerChk]").each(function() {
			$(this).change(function(){
				var brokerId = $(this).val();
				$("[broker=" + brokerId + "]").each(function() {
					$(this).attr("checked", true);
				});
				$("[broker=" + lastCheckedBrokerId + "]").each(function() {
					$(this).attr("checked", false);
				});
				lastCheckedBrokerId = brokerId;
				calcTotal();
			});
		});

		$("[name=itemChk]").each(function() {
			$(this).click(function() {selectItem($(this).attr("broker"), $(this).attr("productId"));});
		});
		
		function selectBroker(checked, userId) {
			$('[broker=' + userId + ']').attr("checked", checked);
			calcTotal();
		}
		
		$("[name=number]").each(function() {
			$(this).focus(function() {
				var number = $(this).val();
				$(this).val(number);
			});
			$(this).change(function() {
				var number = $(this).val();
				if (!digitRegex.test(number)) {
					$(this).val(1);
					number = 1;
				}
				
				var brokerId = $(this).attr("broker");
				var productId = $(this).attr("productId");
				var id = brokerId + "" + productId;
				$.ajax({
					url:"changeItem.htm",
					data:{"id":brokerId,"productId":productId,"number":number,"ts":Math.random()},
					success:function(json){
						if (json.ajaxMsg != null) {
							alert(json.ajaxMsg);
						}
						else {
							var price = parseFloat($("#price" + id).html().substring(1));
							var serviceFee = parseFloat($("#serviceFee" + id).html().substring(1));
							var subtotal = ((price + serviceFee) * number).toFixed(2);
							$("#subtotal" + id).html("￥" + subtotal);
							calcTotal();
						}
					}
				});
			});
		});
	});
	
	
	function settlement() {
		var url = "settlement.htm?brokerId=" + $("[name=brokerChk]:checked").val();
		$('[name=itemChk]:checked').each(function() {
			var productId = $(this).attr("productId");
			url += "&productIds=" + productId;
		});
		window.location.href = url;
	}

	function selectItem(brokerId, productId) {
		if (brokerId == lastCheckedBrokerId) {
			if ($("[broker=" + brokerId + "]:checked").length == 0) {
				$("#brokerChk" + brokerId).attr("checked", false);
			}
		}
		else {
			$("[broker=" + lastCheckedBrokerId + "]").each(function() {
				$(this).attr("checked", false);
			});
			$("#brokerChk" + brokerId).attr("checked", true);
			lastCheckedBrokerId = brokerId;
		}
		
		
		calcTotal();
	
	}
	
	function calcTotal() {
		var total = 0;
		$('[name=itemChk]:checked').each(function() {
			var brokerId = $(this).attr("broker");
			var productId = $(this).attr("productId");
			var id = brokerId + "" + productId;
			var subtotal = parseFloat($("#subtotal" + id).html().substring(1));
			total += subtotal;
		});
		$("#total").html("￥" + total.toFixed(2));
		if (total == 0) {
			$("#settlement").attr("href", "javascript:void(0)");
		}
		else {
			$("#settlement").attr("href", "javascript:settlement();");
		}
	}
	
	function clear() {
		var confirm = window.confirm("确定要清空代购车吗？");
		if (confirm) {
			$.ajax({
				url:'clearCart.htm',
				type:'post',
				success:function(json) {
					$("#cartNum").html(json.cart.count);
					$("#carts").html("暂无商品信息");
					$("#clear").html("");
				}
			});
		}
	}
	
	//删除代购项
	function delItem(brokerId, productId) {
		$.ajax({
			url:'delItem.htm',
			type:'post',
			data:{"brokerId":brokerId,"productId":productId},
			success:function(json) {
				remoteItem(brokerId, productId);
				$("#cartNum").html(json.cart.count);
				if ($("[name=itemChk]").length == 0) {
					$("carts").html("暂无商品信息");
					$("#clear").html("");
				}
				else {
					calcTotal();	
				}
			}
		});
	}
	
	// 移除结点
	function remoteItem(userId, canId) {
		var itemId = "item" + userId + canId;
		var brokerId = "broker" + userId;
		var itemName = "item" + userId;
		$("#" + itemId).remove();
		var items = $('[name=' + itemName  + ']');
		if (items.length == 0) {
			$("#" + brokerId).remove();
		}
	}
	
</script>